<template>
  <div class="home-container">
    <el-row class="main-row-wrapper">
      <el-col :span="19" class="left-wrapper">
        <div class="real-time-table-wrapper">
          <el-table
              :data="docList"
              max-height="310"
              :header-row-style="{
                background:'#FFFFFF',
                color:'#000000',
                fontSize:'24px',
                height:'100px',
              }"
              :cell-style="{
                fontSize:'20px',
              }"
              border
              style="width: 100%">
            <el-table-column
                label="诊室"
                width="180">
              <template slot-scope="scope">{{scope.row.id}}室</template>
            </el-table-column>
            <el-table-column
                v-if="false"
                type="index">
            </el-table-column>
            <el-table-column
                prop="params.depname"
                label="科室名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="username"
                label="医生">
            </el-table-column>
            <el-table-column
                label="正在就诊">
              <template slot-scope="scope">
                <span v-if="visitPatientList[scope.$index]">{{visitPatientList[scope.$index].name}}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="下一个等待">
              <template slot-scope="scope">
                <span v-if="waitPatientList[scope.$index][0]">
                  {{waitPatientList[scope.$index][0].name}}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="wait-patient-title-wrapper">等待候诊患者</div>
        <div class="wait-patient-table-wrapper">
          <div>
            <el-row :key="index" v-for="(item,index) in docList">
              <el-col :span="4">{{item.id}}室（{{item.username}}）</el-col>
              <el-col :span="20">
<!--                <span class="patientName-span" v-for="innerItem in waitPatientList[index]">{{innerItem.name}}111</span>-->
                    <span class="patientName-span" v-for="innerItem in waitPatientList[index]">{{innerItem.name}}</span>

              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="5" class="right-wrapper">
        <div class="overtime-patient-title-wrapper">过号患者</div>
        <div class="overtime-patient-wrapper">
          <div v-for="item in overtimePatientList">{{item.username}}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import patientApi from '@/api/patient'
import { mapState } from "vuex";
import scheApi from "@/api/schedule";
import {dateFormat} from '@/utils/dateUtils'
export default {
  name: "index",
  data(){
    return{
      params: {
        "appkey":"lCGZNEQ5hpBuBmdw",
        "text":'',
        "token":"255b1e3bf0594be38f86c7dde883e0a2",
        "format":"mp3"
      },
      isPlaying:false,
      voice:'',
      visitPatientList:[],
      docList:[],
      waitPatientList:[],
      overtimePatientList:[],
      depcode:'',
      audioQueue:[],
    }
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      //获取路由参数
      this.depcode = this.$route.query.depcode
      //与服务端建立连接
      this.socket = new WebSocket(`ws://localhost:8080/ws/notify/${this.depcode}`)
      this.socket.onmessage = this.websocketonmessage;
      this.socket.onopen = this.websocketonopen;
      this.socket.onerror = this.websocketonerror;
      this.socket.onclose = this.websocketclose;
      this.findDocList()
      this.findDocOverTimeList()
    },
    websocketonmessage(e){
      const msg = JSON.parse(e.data)
      console.log(msg)
      switch (msg.action){
        case 'updatePatList':{
          this.findDocList()
          return
        }
        case 'notifyPatient':{
          //发送发送阿里云语音合成请求
          const text = "请  "+msg.params.name+"到  "+msg.params.docId+"室就诊"
          const audio = new Audio(`https://nls-gateway-cn-shanghai.aliyuncs.com/stream/v1/tts?appkey=${this.params.appkey}&token=${this.params.token}&text=${text}&format=${this.params.format}&sample_rate=16000`)
          this.audioQueue.push(audio)
          this.playNext()//尝试播放下一个请求
          return
        }
        case 'updatePatientToNotify':{
          this.findDocList()
          this.findDocOverTimeList()
        }
        default:return
      }
    },
    websocketonopen(){

    },
    websocketonerror(e){

    },
    websocketclose(e){

    },
    //查询所有过号患者列表
    async findDocOverTimeList(){
      const{data:res} = await patientApi.findOvertimePatientByDepcode(this.depcode)
      this.overtimePatientList = res.data
    },
    async findDocList(){
      //构造查询条件
      const searchObj = {workDate:dateFormat(new Date()),'depcode':this.depcode}
      const{data:res} = await scheApi.findDocList(searchObj)

      //根据docList中的id查询出对应的病人
      for(let i=0;i<res.data.length;i++){
        const patData = await this.findPatientByDocId(res.data[i].id)
        if (patData!=null){
          this.waitPatientList[i] = patData
        }else{
          this.waitPatientList[i]= []
        }
        // this.visitPatientList.push(await this.findVisitPatientByDepcode(res.data[i].id))
        const visitPatData = await this.findVisitPatientByDepcode(res.data[i].id)
        if (visitPatData!=null){
          this.visitPatientList[i] = visitPatData
        }else{
          this.visitPatientList[i]={}
        }
      }

      //赋值给医生列表
      this.docList = res.data
    },
    async findPatientByDocId(docId){
      const {data:res} = await patientApi.findPatientByDocId(docId)
      return res.data
    },
    playNext(){
      if (this.isPlaying||this.audioQueue.length===0){
        return;
      }
      this.isPlaying = true

      const audio = this.audioQueue.shift()
      audio.play()

      audio.onended = ()=>{
        this.isPlaying = false
        this.playNext()
      }
    },
    async findVisitPatientByDepcode(docId){
      const{data:res} = await patientApi.findVisitByDocId(docId);
      return res.data
    }
  }
}
</script>

<style lang="less" scoped>
.home-container{
  height: 100%;
  width: 100%;
  .main-row-wrapper{
    height: 100%;
    .left-wrapper{
      height: 100%;
      border-left: solid 1px #000000;
      border-right: solid 1px #000000;
      .wait-patient-title-wrapper{
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .wait-patient-table-wrapper{
        font-size: 25px;
        border-top: solid 1px #000000;
        border-bottom: solid 1px #000000;
        .patientName-span{
          margin-right: 20px;
        }
      }
    }
    .right-wrapper{
      .overtime-patient-title-wrapper{
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: solid 1px #000000;
      }
      .overtime-patient-wrapper{
        height: 100%;
        overflow: scroll;
        .overtime-patient-info-wrapper{
          font-size: 25px;
          text-align: center;
          margin-bottom: 10px;
        }
      }

    }
  }
}
</style>